<script>
export default {
  name: "carPage1",
  data() {
    return {
      carList: [
        {
          id: 0,
          carName: '宝马',
          cTime: new Date()
        },
        {
          id: 1,
          carName: '奔驰',
          cTime: new Date()
        },
      ],
      carId: '',
      carName: '',
      deleActive: '',
      searchKey: '',
      preValue: '',
      modifyActive: '',
      newValue: ''
    }
  },
  methods: {
    add() {
      let obj = {
        id: this.carId,
        carName: this.carName,
        cTime: new Date(),
      }
      if (this.carList.some(item => item.id === this.carId)) {
        alert('重复添加')
      } else {
        this.carList.push(obj)
      }
    },
    del(item) {

      this.deleActive = this.carList.indexOf(item)
      // this.carList.splice(this.carList.indexOf(item),1)
    },
    confirmDel() {
      this.carList.splice(this.deleActive, 1)
    },
    search() {
      return this.carList.filter((item) => {
        return item.carName.includes(this.searchKey)
      })
    },
    change(item) {
      this.modifyActive = this.carList.indexOf(item)
      this.preValue = this.carList[this.modifyActive].carName
    },
    confirmChange() {
      this.carList[this.modifyActive].carName = this.newValue
    }
    //   自定义过滤器


},
  filters: {
    setTime(data,format) {
      console.log(data)
      console.log(format)
      let y = data.getFullYear()
      let m = (data.getMonth() + 1).toString().padStart(2,0)
      let d = (data.getDate()).toString().padStart(2,0)
      console.log(y,m,d)
      // return format.replace('YYYY',y)
      return data.toString().replace('Thu',y)
    }
  }
}
</script>

<template>
  <div class="container">
    <div class="card">
      <div class="card-header">头部</div>
      <div class="card-body">
        <form class="form-inline">
          <label for="email">id:</label>
          <input type="text" class="form-control" id="email" v-model="carId">
          <label for="pwd">name:</label>
          <input type="text" class="form-control" id="pwd" v-model="carName">
          <button type="submit" class="btn btn-primary" @click="add">添加</button>
          <label for="search">搜索关键字:</label>
          <input type="text" @input="search" class="form-control" id="search" v-model="searchKey">
        </form>
        <table class="table">
          <thead>
          <tr>
            <th>id</th>
            <th>name</th>
            <th>cTime</th>
            <th>operation</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item) in search()" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.carName }}</td>
            <td>{{ item.cTime | setTime('YYYY/MM/DD')}}</td>
            <td>
              <button type="button" @click="del(item)" class="btn btn-primary" data-toggle="modal"
                      data-target="#myModal1">
                删除
              </button>
            </td>
            <td>
              <button type="button" @click="change(item)" class="btn btn-primary" data-toggle="modal"
                      data-target="#myModal">
                修改
              </button>
            </td>
          </tr>
          </tbody>
        </table>
        <!-- 模态框修改 -->
        <div class="modal fade" id="myModal">
          <div class="modal-dialog">
            <div class="modal-content">

              <!-- 模态框头部 -->
              <div class="modal-header">
                <h4 class="modal-title">模态框头部</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>

              <!-- 模态框主体 -->
              <div class="modal-body">
                原来的值：<input type="text" v-model="preValue">
                改后的值：<input type="text" v-model="newValue">
              </div>

              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" @click="confirmChange()" class="btn btn-secondary" data-dismiss="modal">
                  确认修改
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              </div>

            </div>
          </div>
        </div>
        <!-- 模态框删除 -->
        <div class="modal fade" id="myModal1">
          <div class="modal-dialog">
            <div class="modal-content">

              <!-- 模态框头部 -->
              <div class="modal-header">
                <h4 class="modal-title">模态框头部</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>

              <!-- 模态框主体 -->
              <div class="modal-body">
                确定删除？
              </div>

              <!-- 模态框底部 -->
              <div class="modal-footer">
                <button type="button" @click="confirmDel()" class="btn btn-secondary" data-dismiss="modal">确定删除
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<style scoped lang="less">

</style>